<template>
  <div>
    <el-row>
      <el-col :span="20">
        <div>
          <div style="width: 120px;float: left;margin-right: 5px;">
            <el-select v-model="momentStatus" placeholder="请选择打卡状态">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="正常" :value="1"></el-option>
              <el-option label="违规" :value="2"></el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="text-align: right">
          <el-input placeholder="请输入打卡内容" v-model="momentSearch" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <div style="margin-top: 10px;">
      <el-table :data="momentList" style="width: 100%;" border :empty-text="loadingFlag === true ? '正在拼命加载中...':'暂无数据'">
        <el-table-column prop="momentId" label="编号" width="180"></el-table-column>
        <el-table-column prop="content" label="打卡内容" width="150"></el-table-column>
        <el-table-column prop="createTimeStr" label="打卡时间" width="120"></el-table-column>
        <el-table-column prop="userView.nickName" label="发布者昵称" width="100"></el-table-column>
        <el-table-column prop="userView.avatarUrl" label="发布者头像" width="100">
          <template slot-scope="scope">
            <el-avatar :src="mediaHost + scope.row.userView.avatarUrl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="activityView.activityName" label="所在课程" width="120"></el-table-column>
        <el-table-column prop="activityView.activityDesc" label="课程描述" width="240"></el-table-column>
        <el-table-column align="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :type="scope.row.momentStatus === 1 ? 'danger' : ''"
              @click="canDelMoment(scope.$index, scope.row)">{{ scope.row.momentStatus === 1 ? '设置违规' : '恢复正常' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--请求标识-->
      <div v-if="loadingFlag=== true" style="text-align: center;font-size: larger;margin-top: 10px;">
        <i class="el-icon-loading"></i>
      </div>
      <div v-else-if="indexPage.hasMore === true"
           style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;" @click="loadingMore()">
        <span>--点击加载更多--</span>
      </div>
      <div v-else-if="momentList.length > 0"
           style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
        <span>--没有更多数据了--</span>
      </div>
    </div>

    <!--删除提示框-->
    <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="20%">
      <span>确认保存此设置吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setMomentViolation()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Moment",
  data() {
    return {
      mediaHost: this.$global.mediaHost,
      indexPage: this.$global.indexPage,
      paramsData: {
        activityId: ''
      },
      isCollapse: false,
      momentList: [],
      loadingFlag: false,
      hasOnlyMyMoment: true,
      delMomentId: '',
      deleteDialogVisible: false,
      momentSearch: '',
      momentStatus: 0
    }
  },
  mounted() {
    addEventListener('scroll', this.handleScroll)//监听函数
  },
  methods: {
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        //你想做的事情
        if (this.indexPage.hasMore === true && !this.loadingFlag) {
          this.indexPage.page += 1;
          this.getMomentList();
        }
      }
    },
    loadingMore: function () {
      this.indexPage.page += 1;
      this.getMomentList();
    },
    /**
     * 查找
     */
    search: function () {
      this.indexPage = this.$global.indexPage
      this.momentList = []
      this.getMomentList()
    },
    canDelMoment: function (index, row) {
      this.deleteDialogVisible = true
      this.delMomentId = row.momentId
    },
    /**
     *获取查看课件记录
     *
     */
    getMomentList: function () {
      this.loadingFlag = true
      this.paramsData.momentStatus = this.momentStatus
      this.paramsData.momentSearch = this.momentSearch
      this.paramsData.page = this.indexPage
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/manager/getMomentList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.loadingFlag = false
          this.momentList = this.momentList.concat(responseData.pageData.data)
          this.indexPage = responseData.pageData.page
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     *
     * 删除打卡
     * */
    setMomentViolation: function () {
      this.deleteDialogVisible = false
      this.paramsData.momentId = this.delMomentId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/manager/setMomentViolation',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "设置成功",
            center: true,
            duration: 1000
          });
          this.indexPage = this.$global.indexPage
          this.momentList = []
          this.loadingFlag = false
          this.getMomentList()
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
  },
  created() {
    this.getMomentList()
  }
}
</script>

<style scoped>

</style>
